<template>
  <a-modal
    width="656px"
    title="配置节假日时间"
    v-model:visible="visible"
    unmount-on-close
    okText="确认"
    cancel-text="关闭"
    @close="close"
    :mask-closable="false"
    :on-before-ok="onSubmit"
    :body-style="{ paddingBottom: '6px' }"
  >
    <!-- 未更新 -->
    <div class="no-update" v-if="!holidayIsFetching && !form.holidays?.length">
      <img src="@/assets/empty_holiday.png" alt="" />
      最新年份节假日时间暂未更新
    </div>
    <!-- 节假日列表 -->
    <div class="holiday-list" v-else>
      <!-- tips -->
      <div class="tips">十一过后更新明年的节假日时间</div>
      <page-form :model="form" layout="vertical">
        <page-form-row :gutter="56">
          <page-form-item :label="item.holidayTypeName" v-for="(item, index) in form.holidays" :key="index" size="1/2">
            <i-range-picker
              popup-container=".confirm-cost-box"
              class="w-full"
              v-model="item.dateRange"
              :allow-clear="false"
              separator="至"
              :disabled-date="disabledDate(item)"
              @change="(value) => onDatePickerChange(value, item)"
            />
          </page-form-item>
        </page-form-row>
      </page-form>
    </div>
  </a-modal>
</template>

<script setup name="HolidayConfig">
  import { ref } from 'vue'
  import dayjs from 'dayjs'
  import { baseHolidayDetail, baseHolidaySave } from '@/api/business/price.js'
  import { Message } from '@arco-design/web-vue'
  const close = () => {
    visible.value = false
    form.value = {}
  }
  const onSubmit = (done) => {
    const param = form.value.holidays.map((item) => {
      return {
        holidayType: item.holidayType,
        startDate: item.startDate,
        endDate: item.endDate,
      }
    })
    baseHolidaySave(param)
      .then((res) => {
        Message.success(res.message)
        done()
      })
      .catch(() => {
        done(false)
      })
  }
  const form = ref({})

  const visible = ref(false)
  const disabledDate = (item) => {
    return (date) => {
      const limitMin = dayjs(item.limitMin).unix()
      const limitMax = dayjs(item.limitMax).unix()
      return dayjs(date).unix() < limitMin || dayjs(date).unix() > limitMax
    }
  }
  const onDatePickerChange = (value, item) => {
    item.startDate = value[0]
    item.endDate = value[1]
  }
  const holidayIsFetching = ref(false)
  const open = () => {
    visible.value = true
    holidayIsFetching.value = true
    baseHolidayDetail({}).then((res) => {
      const result = res.result
      holidayIsFetching.value = false
      // 设置边界值
      result.forEach((item) => {
        item.limitMin = dayjs(item.baseStartDate).subtract(10, 'day').format('YYYY-MM-DD')
        item.limitMax = dayjs(item.baseEndDate).add(10, 'day').format('YYYY-MM-DD')
        item.dateRange = [item.startDate, item.endDate]
      })
      // 根据边界值获取当前“尚未过期”的日期
      const nowDateStamp = dayjs(dayjs().format('YYYY-MM-DD')).unix()
      const filteredHolidayList = result.filter((item) => {
        const limitMax = item.limitMax
        const limitMaxStamp = dayjs(limitMax).unix()
        return nowDateStamp <= limitMaxStamp
      })
      form.value.holidays = filteredHolidayList
    })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .holiday-list {
    overflow: hidden;
    min-height: 300px;
    .tips {
      height: 22px;
      font-size: 12px;
      color: #86909c;
      line-height: 22px;
      margin-bottom: 11px;
    }
  }
  .no-update {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #9ea5bb;
    line-height: 22px;
    padding: 97px 0;
    img {
      width: 106px;
      height: 106px;
      margin-bottom: 16px;
    }
  }
</style>
